<template>
	<view class="container ">
		<view class="header marginTop32">
			<view class="title">
				提现金额
			</view>
			<view class="info flexCenter">
				￥
				<input
					type="digit"
					@input="testMoney"
					placeholder="请输入提现金额"
					v-model="form.money"
				/>
			</view>
		</view>
		<view class="marked flexCenter">
			<image
				src="@/static/images/center/notice.png"
				mode=""
			></image>
			每次提现金额最高{{max.withdrawalMaxMoney}}，每天只允许提现{{max.withdrawalMaxNum}}次
		</view>
		<view class="main">
			<view class="top flexCenter">
				提现到
				<radio-group
					@change="radioChange"
					class="flexCenter"
					name="tixian"
				>
					<label class="flexCenter">
						<radio
							:value="2"
							color="red"
							checked="true"
						/>
						<image
							class="image"
							src="@/static/images/center/alipay.png"
							mode=""
						></image>
					</label>
					<label class="flexCenter">
						<radio
							:value="1"
							color="red"
						/>
						<image
							class="wechat"
							src="@/static/images/center/wechatpay.png"
							mode=""
						></image>
					</label>
				</radio-group>
			</view>
			<view
				class="bottom"
				v-show="showAlipay"
			>
				<input
					class="account"
					type="text"
					placeholder="请输入支付宝账号/手机号"
					v-model="form.zhiAccount"
				>
				<input
					class="password"
					type="text"
					placeholder="请输入真实姓名"
					v-model="form.zhiName"
				>
			</view>
		</view>
		<button
			class="submit"
			@tap="query"
		>立即提现</button>
	</view>
</template>

<script>
import { Home } from '@/config/API'
import { toast } from '@/utils/uni';
import { isAlipay, isRealName, isMoneyAmount } from '@/config/utils.js'
export default {
	data () {
		return {
			form: {
				money: null,
				type: 2,
				zhiAccount: '',
				zhiName: ''
			},
			showAlipay: true,
			max: {
				withdrawalMaxMoney: '0.00',
				withdrawalMaxNum: 0,
			},
			userMoney: 0
		};
	},
	onShow () {
		this.getUserInfo()
	},
	methods: {
		// 最大提现次数、金额
		getUserInfo () {
			Home.userCenter().then(res => {
				this.max.withdrawalMaxMoney = res.data.withdrawalMaxMoney
				this.max.withdrawalMaxNum = res.data.maxWithdrawalNum
				this.userMoney = res.data.yongjin
			})
		},
		// 提现类型：支付宝、微信
		radioChange: function (evt) {
			let { value } = evt.detail
			this.form.type = value
			if (value == 1) {
				this.showAlipay = false
			} else {
				this.showAlipay = true
			}
		},
		// 限制金额输入
		testMoney (e) {
			let that = this;
			let price = e.detail.value
			if (price.indexOf(".") == 0) {
				//'首位小数点情况'
				price = price.replace(/[^$#$]/g, "0.");
				price = price.replace(/\.{2,}/g, ".");
			}
			price = price.match(/^\d*(\.?\d{0,2})/g)[0] || null;
			//重新赋值给input
			this.$nextTick(() => {
				this.form.money = price;
			});
		},
		// 提现
		query () {
			uni.showModal({
				content: "确定提现吗",
				success: (res) => {
					uni.showLoading({
						title: "提现中"
					})
					// 点击确定
					if (res.confirm) {
						// 判空
						if (!this.form.money || !isMoneyAmount(this.form.money)) {
							toast('请输入正确提现金额')
							return
						} else if (this.form.type == 2) {
							if (!this.form.zhiAccount || !isAlipay(this.form.zhiAccount)) {
								toast('请输入正确支付宝账号')
								return
							} else if (!this.form.zhiName || !isRealName(this.form.zhiName)) {
								toast('请输入正确姓名')
								return
							}
						}
						Home.withdrawal(this.form).then(res => {
							uni.hideLoading()
							toast(res.msg, 'success')
							uni.navigateBack()
						})
					}
				}
			})
		}
	}
}
</script>
<style>
page {
	background-color: #f4f6f8;
}
</style>
<style lang="scss" scoped>
.header {
	width: 750rpx;
	height: 182rpx;
	background: #ffffff;
	border-radius: 0rpx 0rpx 0rpx 0rpx;
	opacity: 1;
	padding: 40rpx 0 31rpx 30rpx;

	.title {
		font-size: 30rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
		margin-bottom: 20rpx;
	}

	.info {
		font-size: 50rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;

		input {
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			// color: #999999;
		}
	}
}

.marked {
	margin-left: 35rpx;
	margin-bottom: 66rpx;

	image {
		width: 25rpx;
		height: 25rpx;
	}

	font-size: 24rpx;
	font-family: PingFang SC-Medium, PingFang SC;
	font-weight: 500;
	color: #999999;
}

.main {
	padding: 30rpx 54rpx 27rpx 40rpx;
	background: #ffffff;
	border-radius: 0rpx 0rpx 0rpx 0rpx;
	opacity: 1;

	.top {
		font-size: 30rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
		radio {
			transform: scale(0.6);
		}
		image {
			width: 123rpx;
			height: 43rpx;
		}

		.wechat {
			width: 159rpx;
			height: 40rpx;
		}

		.image {
			margin-right: 100rpx;
		}

		radio-group {
			margin-left: 25rpx;
		}
	}

	.bottom {
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		// font-weight: 500;
		// color: #999999;

		.account {
			border-bottom: 1px solid #dfdfdf;
			padding-bottom: 15rpx;
			margin-top: 80rpx;
			box-sizing: content-box;
		}

		.password {
			margin-top: 63rpx;
			box-sizing: content-box;
		}
	}
}

.submit {
	margin-top: 80rpx;
}
</style>